<template>
    <view
        class="goods-item"
        :class="[
            {
                'is-disabled': info.receiveStatus > 0
            }
        ]"
        :style="{
            marginBottom
        }"
    >
        <!-- 排名 -->
        <view class="goods-item__rank">
            <template v-if="index < 3">
                <image
                    :src="
                        `https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/images/million_good_top${index +
                            1}.png`
                    "
                />
            </template>
            <view
                class="goods-item__rank-index"
                v-else-if="index > 2 && index < 10 && tabIndex == 0"
            >
                <text>{{ index + 1 }}</text>
            </view>
        </view>

        <!-- 封面 -->
        <view class="goods-item__cover" @tap="toBuy(info, type, index)">
            <image mode="aspectFit" class="goods-item__cover-pic" :src="info.pic" lazy-load />
            <image
                v-if="info.quanMLink > 0"
                class="goods-item__cover-tag"
                src="@/static/images/pre-sale-tag.png"
            />
        </view>

        <!-- 详情 -->
        <view class="goods-item__detail">
            <view class="goods-item__title" @tap="toBuy(info, type, index)">
                <text class="iconfont icon-tianmao" v-if="info.shoptype == 1"></text>
                <text class="iconfont icon-taobao2" v-else-if="info.shoptype == 0"></text>
                <text class="goods-item__title-tag" v-else-if="info.shoptype == 10">优选</text>
                {{ info.title }}
            </view>
            <template>
                <view class="goods-item__price">
                    <image src="@/static/images/price-cp.png" />
                    <text class="subsidy">{{ info | now_price }}</text>
                    <text class="market">￥{{ info.price }}</text>
                    <text class="platform">￥{{ info.price }}</text>
                </view>

                <view class="goods-item__footer">
                    <view class="goods-item__coupon">
                        <view>{{ info.receiveVirtualNum | unitNumber }}件</view>
                        <view>已抢购</view>
                    </view>

                    <view class="goods-item__grab">
                        <image
                            mode="widthFix"
                            src="@/static/images/grab-disabled-bg.png"
                            v-if="info.receiveStatus > 0"
                        />
                        <image src="@/static/images/grab-bg.png" v-else />
                        <view class="goods-item__grab-price">
                            <text v-if="info.goodSource == 1"
                                >{{ info.allowanceMoney || 0 }}元</text
                            >
                            <text v-if="info.goodSource == 2">{{ info.couponMoney || 0 }}元</text>
                            <text>{{ info.goodSource == 1 ? '补贴金' : '优惠券' }}</text>
                        </view>

                        <view class="goods-item__grab-btn" :class="'statis-' + type + '-' + index">
                            <text @tap="toBuy(info, type, index)">抢</text>
                        </view>
                    </view>
                </view>
            </template>

            <!-- 已使用 -->
            <template>
                <view class="goods-item__state--used" v-if="info.hasBuy == 1">
                    <image src="@/static/images/state-used.png" />
                </view>
            </template>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex';
import Buy from '@/mixins/buy';

export default {
    props: {
        item: Object,
        index: Number,
        tabIndex: Number,
        type: String,
        isNew: Boolean,
        marginBottom: {
            type: String,
            default: '20rpx'
        },
        isActivity: {
            type: Boolean,
            default: true
        }
    },

    mixins: [Buy],

    data() {
        return {
            info: this.item
        };
    },

    created() {
        // this.item.allowanceMoney = 0;
    },

    filters: {
        now_price({ goodSource, endPrice, mdMoney, tljMoney, hzQuanOver }) {
            if (goodSource == 1) {
                return (
                    parseFloat(endPrice || 0) -
                    parseFloat(mdMoney || 0) -
                    parseFloat(tljMoney || 0) -
                    parseFloat(hzQuanOver || 0)
                ).toFixed(2);
            } else {
                return endPrice;
            }
        }
    },

    computed: {
        ...mapGetters(['userInfo', 'conf', 'token'])
    }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
